﻿<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="keywords" content="代码预览工具" />
		<meta name="description" content="代码预览工具是一款即时修改代码即时预览效果的工具，您可以将拼图响应式前端CSS框架代码放在编辑器内边调整边预览效果，省去刷新等操作。" />
		<title>代码预览工具-拼图工具-拼图前端框架</title>
		<link href="../pintuer.css" rel="stylesheet" type="text/css" />
		<link href="../style.css" rel="stylesheet" type="text/css" />
		<script src="../jquery.js"></script>
		<script src="../pintuer.js"></script>
		<script src="../plugins/respond.js"></script>
		<script src="../plugins/layer/layer.js"></script>
		<script src="../plugins/htmlformat.js"></script>
		<link type="image/x-icon" href="../favicon.ico" rel="shortcut icon" />
		<link href="../favicon.ico" rel="bookmark icon" />
		<style>
			.demo-nav.fixed.fixed-top {
				z-index: 8;
				background: #fff;
				width: 100%;
				padding: 0;
				border-bottom: solid 3px #0a8;
				-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .175);
				box-shadow: 0 3px 6px rgba(0, 0, 0, .175);
			}

			.hove {
				border: 1px solid #0a8;
				cursor: crosshair;
			}
		</style>
	</head>

	<body>
		<!--顶部-->
		<div class="layout bg-main bg-inverse fixed" style="z-index: 9;">
			<div class="container">
				<div class="navbar">
					<div class="navbar-head">
						<button class="button bg-white icon-navicon" data-target="#respond">
						</button>
						<a href="../index.html">
							<img src="images/30-white.png" />
							<strong class="text-big">拼图 - 工具</strong></a>
					</div>
					<div class="navbar-body nav-navicon" id="respond">
						<ul class="nav nav-inline nav-menu navbar-right">
							<li><a target="_blank" href="../javascript:void(0)">演示</a>
								<ul class="drop-menu">
									<li><a href="../index.html">起步</a> </li>
									<li><a href="../css.html">CSS</a> </li>
									<li><a href="../widgets.html">元件</a> </li>
									<li><a href="../javascript.html">JS组件</a> </li>
									<li><a href="../react.html">常用</a></li>
								</ul>
							</li>
							<li><a class="bg-green" target="_blank" href="index.html">工具</a>
								<ul class="drop-menu">
									<li><a target="_blank" href="test.html">响应式测试工具</a></li>
									<li><a target="_blank" href="form.html">表单设计生成</a></li>
									<li><a target="_blank" href="animation.html">CSS3动画生成</a></li>
									<li><a target="_blank" href="viewcode.html">代码预览工具</a></li>
									<li><a target="_blank" href="color.html">自定义颜色生成</a></li>
									<li><a target="_blank" href="setcolor.html">配色工具</a></li>
									<li><a target="_blank" href="popo.html">气泡框生成</a></li>
								</ul>
							</li>
							
							</li>
							<li><a class="bg-yellow" target="_blank" href="../start.html">拼图使用文档</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--
		<br />
		<div class="container-layout">
			由作者<a class="text-dot" href="../http://www.dahuotu.com">大火兔</a>友情提供
			<div class="alert-yellow margin padding">
				<strong>拼图代码预览工具是一款即时修改代码即时预览效果的工具，您可以将拼图响应式前端CSS框架代码放在编辑器内边调整边预览效果，省去刷新等操作。 <br>
				<strong class="tag bg-blue">注:</strong><span class="text-blue">该工具已内置，拼图响应式前端框架最新CSS样式及JS，这里的代码相当于body之间的内容。</span>
				</strong>
			</div>
		</div>
		<br />
		-->
		<!--内容-->
		<div class="container-layout">
			<div class="x6">
				<div class="panel doc-demo" style="margin-right: 5px:">
					<div class="panel-head doc-ad0">
						<strong>代码</strong>&nbsp;
					</div>
					<div class="panel-body">
						<div class="button-toolbar">
							<div class="button-group border-main">
								<button type="button" class="button" id="btn-clear">
									清空</button>
								<button type="button" class="button bg-main" id="btn-format">
									美化</button>
							</div>
						</div>
						<hr>
						<textarea id="code" class="input html" style="height: 600px;"></textarea>
					</div>
				</div>
			</div>
			<div class="x6">
				<div class="panel doc-demo" style="margin-left: 5px;">
					<div class="panel-head doc-ad0">
						<strong id="click-view">预览</strong>&nbsp;<span id="print-size" class="tag bg-yellow"></span>
					</div>
					<div class="panel-body">
						<div class="button-toolbar">
							<div class="button-group border-main">
								<button type="button" class="button" id="button-print">
									自适应</button>
								<button type="button" class="button dropdown-toggle bg-main">
									其他分辨率<span class="downward"></span></button>
								<ul class="drop-menu" id="view-print">
									<li class="border-bottom border-top"><a href="../javascript:;"><strong>电脑端</strong></a></li>
									<li i-width="800" i-height="600"><a href="../javascript:;">800x600</a></li>
									<li i-width="1024" i-height="768"><a href="../javascript:;">1024x768</a></li>
									<li i-width="1280" i-height="720"><a href="../javascript:;">1280x720</a></li>
									<li i-width="1360" i-height="768"><a href="../javascript:;">1360x768</a></li>
									<li i-width="1366" i-height="768"><a href="../javascript:;">1366x768</a></li>
									<li i-width="1440" i-height="900"><a href="../javascript:;">1440x900</a></li>
									<li class="border-bottom border-top"><a href="../javascript:;"><strong>移动端</strong></a></li>
									<li i-width="320" i-height="480"><a href="../javascript:;">ipone3(320x480)</a></li>
									<li i-width="360" i-height="640"><a href="../javascript:;">android(360x640)</a></li>
									<li i-width="480" i-height="800"><a href="../javascript:;">android(480x800)</a></li>
									<li i-width="640" i-height="960"><a href="../javascript:;">ipone4(640x960)</a></li>
									<li i-width="640" i-height="1136"><a href="../javascript:;">ipone5(640x1136)</a></li>
									<li i-width="750" i-height="1334"><a href="../javascript:;">ipone6(750x1334)</a></li>
									<li i-width="768" i-height="1004"><a href="../javascript:;">ipad(768x1004)</a></li>
									<li i-width="1024" i-height="748"><a href="../javascript:;">ipda横屏(1024x748)</a></li>
									<li i-width="768" i-height="1024"><a href="../javascript:;">ipda-IOS7/8(768x1024)</a></li>
									<li i-width="1024" i-height="768"><a href="../javascript:;">ipda-IOS7/8横屏(1024x768)</a></li>
									<li class="border-bottom border-top"><a href="../javascript:;"><strong>其它</strong></a></li>
									<li i-width="320" i-height="442"><a href="../javascript:;">ldpi(320x442)</a></li>
									<li i-width="480" i-height="762"><a href="../javascript:;">hdpi(480x762)</a></li>
									<li i-width="720" i-height="1242"><a href="../javascript:;">xhdpi(720x1242)</a></li>
									<li i-width="1080" i-height="1882"><a href="../javascript:;">xxhdpi(1080x1882)</a></li>
								</ul>
							</div>
						</div>
						<hr>
						<div id="view" class="panel" style="height: 600px; width: 100%;">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container-layout">
			<!--PC和WAP自适应版-->
			<div id="SOHUCS" sid="pintuer-tools-viewcode"></div>
		</div>
		<!--底部-->
		<!--
		<br />
		<br />
		<div class="layout bg-black bg-inverse">
			<div class="container">
				<div class="navbar">
					<div class="navbar-head">
						<button class="button bg-gray icon-navicon" data-target="#navbar-footer">
						</button>
						<a href="../http://www.pintuer.com" target="_blank">
							<img class="logo" src="images/24-white.png" alt="拼图前端CSS框架" />
						</a>
					</div>
					<div class="navbar-body nav-navicon">
						<div class="navbar-text navbar-left hidden-s hidden-l">
							版权所有 &copy; <a href="../http://www.pintuer.com" target="_blank">Pintuer.com</a> All Rights Reserved
						</div>
						<ul class="nav nav-inline navbar-right">
							<li><a href="../http://www.pintuer.com">首页</a></li>
							<li><a href="../http://www.pintuer.com">CSS</a></li>
							<li><a href="../http://www.pintuer.com">元件</a></li>
							<li><a href="../http://www.pintuer.com">更多 </a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<div class="doc-backtop win-backtop icon-arrow-circle-up">
		</div>
		-->
		<script>
			$(function() {
				iframesize();
				//清空
				$("#btn-clear").click(function() {
					$("#code").val('');
					$("#view").html('');
					$('#iframe-view').contents().find("#viewcode").html($("#code").val());
				});
				//格式化
				$("#btn-format").click(function() {
					var formattedHtml = HTMLFormat($("#code").val());
					$("#code").val(formattedHtml);
				});
				//给层赋值
				$("#code").keyup(function() {
					$('#view').html($(this).val());
				});
				//自适应
				$("#button-print").click(function() {
					$("#view").css({
						"width": "100%",
						"height": "960px"
					});
					iframesize();
				});
				//选择分辨率
				$("#view-print li").click(function() {
					if ($(this).attr("i-width") != undefined && $(this).attr("i-height") != undefined) {
						var w = $(this).attr("i-width"); //获取宽度
						var h = $(this).attr("i-height"); //获取高度
						var cw = $("#code").width();
						var ch = $("#code").height();
						if (w <= cw && h <= ch) {
							$("#view").css({
								"width": "" + w + "",
								"height": "" + h + ""
							});
						} else {
							layer.open({
								type: 1,
								title: '大屏预览',
								shadeClose: true,
								shade: 0.8,
								area: ['' + w + 'px', '' + h + 'px'],
								content: $('#view').html()
							});
						}
						iframesize();
						$("#click-view").click();
					}
				});
			});

			function iframesize() {
				//加载当前iframe尺寸
				$("#print-size").html("当前分辨率：" + $("#view").width() + "x" + $("#view").height() + "");
			}
		</script>
	</body>

</html>
